<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.slide-box-container {
				margin: 0 auto;
				position: relative;
				overflow: hidden;
				border-radius: 6px;
			}
			.slide-box-img-container {
				position: absolute;
			}
			.slide-box-img-container img {
				float: left;
			}
			.slide-box-descript-container {
				height: 2em;
				position: absolute;
				bottom: 1em;
				text-align: center;
				overflow: hidden;
				background-color: rgba(0,0,0,0.6);
			}
			.slide-box-descript {
				height: 1em;
				line-height: 1em;
				padding: 0.5em 0.5em;
				color: white;
				font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
			}
			.slide-box-descript a:hover, 
			.slide-box-descript a:visited, 
			.slide-box-descript a:link, 
			.slide-box-descript a:active {
				text-decoration: none;
				color: white;
			}
			.slide-box-anchor-container {
				height: 1em;
				position: absolute;
				bottom: 0;
				text-align: center;				
				background-color: rgba(0,0,0,0.6);	
			}
			.slide-box-anchor-container ul {
				margin: 0;
				padding: 0;
				list-style: none;
				cursor: default;
			}
			.slide-box-anchor {
				width: 18px;
				height: 0.4em;
				margin: 0.3em 1px;
				display: inline-block;
				border-radius: 1em;
				background-color: white;
				cursor: pointer;
				transition: all 0.25s;
			}
			.slide-box-anchor-active {
				width: 30px;
				background-color: #f25d8e;
			}
		</style>
	</head>
	<body>
		<div class="slide-box-container" data-init="true" data-type="slide-box"></div>
        
		<script src="jquery-3.1.1.min.js"></script>
		<script src="template.js"></script>
        
		<script>
            
            var data = {
                
                // 图片素材宽度 务必保证素材尺寸统一
                
                width: 350,
                
                // 图片素材高度 务必保证素材尺寸统一
                
                height: 350,
                
                // 轮播图数据
                
                slideBox: [
                    { img: '1.jpeg', descript: '果皇' },
                    { img: '2.jpeg', descript: '海爷' },
                    { img: '3.jpeg', descript: '小鸟' },
                    { img: '4.jpeg', descript: '花阳' },
                    { img: '5.jpeg', descript: '凛喵' },
                    { img: '6.jpeg', descript: '提款姬' },
                    { img: '7.jpeg', descript: 'Nico' },
                    { img: '8.jpeg', descript: '希神' },
                    { img: '9.jpeg', descript: 'KKE' },
                ]
            }
        
			$(function() {						
          
				$('[data-init=true]').each(function(i, e) {
                
					var e = $(e);
                    
					if(e.data('type') === 'slide-box') {
                    
                        // ---------------- 根据数据渲染模板 ----------------
                    
                        e.html(template('template-slide-box', data))
                        
                        // ---------------- 动态设置CSS ----------------
                        
                        // 轮播图遮罩容器
                        
                        e.css({ width: data.width + 'px', height: data.height + 'px' })
                        
                        // 轮播图容器
                        
                        e.find('.slide-box-img-container').css({ width: data.width * 9 + 'px', height:  data.height + 'px' })
                        
                        // 图片样式
                        
                        e.find('.slide-box-img-container img').css({ width: data.width + 'px', height: data.height + 'px' })
                               
                        // 锚点样式
                               
                        e.find('.slide-box-anchor-container').css({ width: data.width + 'px' })
                        
                        // 文字描述样式
                        
                        e.find('.slide-box-descript-container').css({ width: data.width + 'px' })
                        
                        // 缓存jQuery对象
                        
						var imgBox = e.find('.slide-box-img-container');
                        
						var descripts = e.find('.slide-box-descript');
                        
						var anchors = e.find('.slide-box-anchor');
                        
                        // ---------------- 状态 ---------------- 
                        
						var name = 1, isHover = false;
						
                        // ---------------- 功能 ----------------
                        
                        // 将轮播图滚动到某个锚点处
                        
						function updateAnchor(anchor) {
                        
							var e = $(anchor);
                            
							name = e.data('for');
                            
							// 更新锚点图标样式为激活样式
                            
							anchors.removeClass('slide-box-anchor-active');
                            
							e.addClass('slide-box-anchor-active');
                            
							// 显示图片的说明内容
                            
							descripts.hide();
                            
							descripts.filter((i, e) => $(e).data('name') === name).show();
                            
							// 滑动图片
                            
							imgBox.stop().animate({ left: '-' + (name - 1) * data.width + 'px' }, 200);							
						}	
						
						// 实现鼠标悬停暂停
                        
						e.mouseenter(() => console.log(isHover = true));
                        
						e.mouseleave(() => console.log(isHover = false));
						
                        // 展示第一幅图片的说明内容
                        
						descripts.slice(1).hide();
                        
                        // 激活第一个锚点图标样式
                        
						anchors.first().addClass('slide-box-anchor-active');
                        
                        // 对全部锚点图标绑定事件 鼠标悬停其上时 立即滚动到该锚点处 
                        
						anchors.hover(function() { updateAnchor(this); });
						
						// 定时器
						var timer = setInterval(function() {
                            
                            // 如果鼠标悬停 则不滚动当前图片
                            
							if(isHover) return;
                            
                            // 计算下一次触发滚动到的锚点位置
                            
							name = (name === data.slideBox.size ? 1 : name + 1);
                            
                            // 执行滚动操作
                            
							updateAnchor(anchors.eq(name - 1));	
                            
						}, 1000);
					}
                    
                    // ---------------- 组件初始化完毕 ----------------
                    
					e.data('init', false);
				});
			});
			
		</script>
        
        <script id="template-slide-box" type="text/html">
            <div class="slide-box-img-container">
                <%for(var i = 0; i < slideBox.length; ++i) {%>
                    <img src="<%=slideBox[i].img%>" />
                <%}%>
			</div>
			<div class="slide-box-descript-container">  
                <% for(var i = 0; i < slideBox.length; ++i) { %>
                    <div class="slide-box-descript" data-name="<%= i + 1 %>">
                        <a href="#"><%= slideBox[i].descript %></a>
                    </div>                    
                <% } %>
			</div>
			<div class="slide-box-anchor-container">
                <% for(var i = 0; i < slideBox.length; ++i) { %>
                    <li class="slide-box-anchor" data-for="<%= i + 1 %>"></li>
                <% } %>
            </div>
        </script>        
        
	</body>
</html>